<template>
    <div class="body" v-show="isShow">
        <div class="head">
            <sapn class="shutdown" @click="handleback">&times;</sapn>
            <div class="thumbnail">
                <div class="max"> 
                    <div class="left">
                        <div v-for="(item,index) in list" :key="index" :style="item" v-show="item.isShow" >
                            <span class="l" @click="left(index)">&lt;</span><span class="r" @click="right(index)">&gt;</span>
                        </div>
                    </div>
                </div>
                <div class="right"> 
                    <div class="right-top">
                     <div>
                        <h1>{{commodity.name}}</h1>
                        <p>￥{{commodity.Price}}</p>
                     </div>
                     <div>
                        <span>{{commodity.num}}</span>
                        <span>￥{{commodity.price}}</span>
                     </div>
                    </div>
                   <div class="right-body">
                    <p>价格说明</p> 
                    <span>颜色:{{text}}</span>
                    <div class="bgc">
                        <ul>
                            <li v-for="(item,index) in color" :key="index" :style="item" :class="{ash: item.num==index}" @click="add(index)">
                            </li>
                        </ul>
                    </div>
                </div>
                    <div class="right-foot">
                    <div>
                        <div class="foot">
                            <p>尺码:</p>
                            <span @click="eu" :class="{eu: num==1}">EU</span>
                            <span @click="cn" :class="{eu:num==2}">CN</span> 
                        </div>
                        <div class="list-size">
                            <div v-for="(item,index) in Size" :key="index" @click="handoff(index)" :class="{color: control==index}">{{item}}</div>
                        </div>
                    </div>
                    <div class="pay">
                        <div><router-link to="/cart">立即购买</router-link></div>
                        <div><router-link to="/details" class="black">更多详情</router-link></div>
                    </div>
                    </div>
                    <div class="under">
                        <div class="under-left">
                            <span>分享:</span>
                            <span class="wb"></span>
                            <span class="wx"></span>
                        </div>
                        <div class="under-right">
                            <span></span>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</template>
<style scoped>

    .head {
    position: fixed;
    width: 1200px;
    height: 550px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
}
.shutdown{
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    right: 0;
}
.body{
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(128,128,128,.7);
   
}
body{
    width: 100%;
    height: 100%;
}
html{
    width: 100%;
    height: 100%;

}
.shutdown a{
    font-size: 24px;
}
.thumbnail {
    margin-top: 10px;
}

ul,
li {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.thumbnail {
    display: flex;
    justify-content: left;
}

.max {
    width: 70%;
    /* position: relative; */
    overflow: hidden;
    height: 500px;
    display: flex;
}

.max span {
    font-size: 50px;
}

.left {
    margin-right: 20px;
    overflow: hidden;
    height: 500px;
    width: 100%;
    position: relative;
    display: flex;
}

.left div {
    width: 100%;
    position: absolute;
    /* width: 800px; */
    height: 500px;
    background-size: cover;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
}

.left div span {
    cursor: pointer;
    color: #616265;
    user-select: none;
}

.right {
    width: 20%;
}

.l {
    position: relative;
    top: 50%;
    transform: translate(-50% -50%);
}

.r {
    position: relative;
    float: right;
    top: 50%;
    transform: translate(-50% -50%);
}

.right p {
    margin: 0;
}

.right-top div {
    display: flex;
    justify-content: space-between;
}

.right-top {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.right-top h1 {
    margin: 0;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.right-top div:first-child {
    margin-bottom: 10px;
}

.right-body span {
    margin-bottom: 10px;
}

.right-top div span {
    font-size: 14px;
    color: #616265;
}

.right-top div span:last-child {
    text-decoration: line-through
}

.right-body {
    display: flex;
    flex-direction: column;
}

.right-body p {
    margin-top: 10px;
    margin-bottom: 50px;
    font-size: 12px;
}

.right-body span {
    font-size: 14px;
    color: #616265;
}

.bgc ul {
    display: flex;
    justify-content: left;
    height: 36px;
}

.bgc {
    box-sizing: content-box;
    margin-bottom: 20px;
}

.bgc li {
    background-size: 66px 35px;
    width: 66px;
    height: 35px;
    margin-right: 5px;
    cursor: pointer;
}

.ash {
    border-bottom: 2px solid #616265;
}

.bgc li:hover {
    border-bottom: 2px solid #616265;
}

.list-size {
    display: flex;
    width: 100%;
    justify-content: left;
}

.list-size div {
    width: 55px;
    height: 35px;
    margin-top: 10px;
    border: 1px solid #000;
    margin-left: 5px;
    font-size: 14px;
    color: #616265;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
}

font {
    margin-right: 50px;
}

.right-foot span {
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-left: 3px;
    border: 1px solid #616265;
    font-size: 14px;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
}

.foot {
    display: flex;
}

.foot p {
    margin-right: 20px;
}

.eu {
    background: #000;
    color: #fff;
}

.list-size div:first-child {
    margin-left: 0;
}

.list-size .color {
    background: #000;
    color: azure;
}

.pay {
    display: flex;
    justify-content: left;
}

.pay div {
    margin-top: 50px;
    margin-right: 20px;
    border: 2px solid #000;
    /* color: #616265;
    text-align: center;
    line-height: 40px; */
    cursor: pointer;
}

.pay a {
    display: inline-block;
    width: 146px;
    height: 40px;
    color: #616265;
    text-align: center;
    line-height: 40px;
    margin-left: 0;
}

.pay div:last-child {
    background: #000;
}

.pay div .black {
    color: #fff;
}

.under {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}

.under-left {
    display: flex;
}

.under-left span {
    font-size: 14px;
    color: #616265;
    line-height: 30px;
}

.wb {
    background: url(../../public/images/details/R-C.png);
    background-size: 30px;
    cursor: pointer;
}

.wx {
    background: url(../../public/images/details/OIP-C.jpg);
    background-size: 30px;
    cursor: pointer;
}

.under-left span:not(:first-child) {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    /* border: 1px solid #616265; */
}

.under-right {
    display: flex;
}

.under-right span {
    font-size: 14px;
    color: #616265;
    line-height: 30px;
}

.under-right span:first-child {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    background: url(../../public/images/details/13.jpg);
    opacity: .3;
    cursor: pointer;
    background-size: 30px;
}

</style>
<script>
export default{
    data(){
        return{
            num:1,
            control:-1,
           list:[
                {
                    background:'url(../../public/images/details/01.jpg)no-repeat center',
                    isShow:true
                }, {
                    background:'url(../../public/images/details/02.jpg)no-repeat center',
                    isShow:false
                },{
                    background:'url(../../public/images/details/03.jpg)no-repeat center',
                    isShow:false
                }, {
                    background:'url(../../public/images/details/04.jpg)no-repeat center',
                    isShow:false
                }, {
                    background:'url(../../public/images/details/05.jpg)no-repeat center',
                    isShow:false
                }
            ],
            commodity:{
                    name:'ECCO型塑20尖头系列女士正装鞋',
                    Price:1549,
                    price:1999,
                    num:52324460345,
                    },
            color:[{
                    background:'url(../../public/images/details/01.jpg)no-repeat center',
                    backgroundSize:'40px',
                    color1:"石灰色",
                    num:0
                },{
                    background:'url(../../public/images/details/06.jpg)no-repeat center',
                    backgroundSize:'40px',
                    color1:"托斯卡纳粉",
                    num:0
                },{
                    background:'url(../../public/images/details/07.jpg)no-repeat center',
                    backgroundSize:'40px',
                    color1:"黑色",
                    num:0
                }],
            text:"石灰色",
            Size:[35,36,37,38,39,40,],
            isShow:true
        }
    },
    methods:{
        handleback(){
            this.$router.back()
        },
        left(index){
           if(index>=1){
            this.list[index].isShow=false;
            this.list[index-1].isShow=true;
           }else if(index==0){
            this.list[index].isShow=false;
            this.list[this.list.length-1].isShow=true
           }
        },
        right(index){
            if(index<this.list.length-1){
                console.log(this.list.length)
                this.list[index].isShow=false;
                this.list[index+1].isShow=true
            }else{
                this.list[index].isShow=false;
                this.list[0].isShow=true
            }
        },
        add(index){
            this.text=this.color[index].color1
            for(var i=0;i<this.color.length;i++){
                this.color[i].num=index
            }
        },
        shutdown(){
            this.isShow=false
        },  
        eu(){
            this.num=1;
            this.Size=[35,36,37,38,39,40,]
        },
        cn(){
            this.num=2
            this.Size=[220,225,235,240,245,255] 
        },
        handoff(index){
           this.control=index
        }
    }
}
</script>
